import React, { useContext, useEffect, useState, FC } from 'react';
import {
  Tooltip,
  Avatar,
  Select,
  Dropdown,
  Menu,
  Divider,
  Message,
  Tag,
} from '@arco-design/web-react';
import {
  IconLanguage,
  IconSunFill,
  IconMoonFill,
  IconPoweroff,
  IconTag,
} from '@arco-design/web-react/icon';
import { useSelector } from 'react-redux';
import { GlobalState } from '@/store/types';
import { GlobalContext } from '@/context';
import { useLocale } from '@/utils/hooks';
import IconButton from './IconButton';
import styles from './style/index.module.less';
import defaultLocale from '@/locale';
import { logout } from '@/utils';
import NavBarMenu from './NavBarMenu';
import { ArcoLocaleOptions } from '@/config/ArcoLocale';
import AllIcon from '../AllIcon';

const Navbar: FC = () => {
  const t = useLocale();
  const userInfo = useSelector((state: GlobalState) => state.userInfo);

  const [loginParams, setLoginParams] = useState<any>();
  const { setLang, lang, theme, setTheme } = useContext(GlobalContext);

  function onMenuItemClick(key) {
    if (key === 'logout') {
      logout();
    } else {
      Message.info(`You clicked ${key}`);
    }
  }

  useEffect(() => {
    setLoginParams(JSON.parse(localStorage.getItem('loginParams')))
  }, [])

  const triggerElement = () => {
    const text = lang
    return (
      <Tag className="cursor-pointer">{text.split('-')[0]}</Tag>
    )
  }

  const droplist = (
    <Menu onClickMenuItem={onMenuItemClick}>
      {loginParams && <Menu.Item key="role">
        <IconTag className={styles['dropdown-icon']} />
        <span>{loginParams?.user?.username}</span>
      </Menu.Item>}
      <Divider style={{ margin: '4px 0' }} />
      <Menu.Item key="logout">
        <IconPoweroff className={styles['dropdown-icon']} />
        {t('navbar.logout')}
      </Menu.Item>
    </Menu>
  );


  return (
    <div className={styles.navbar}>
      <div className={styles.logotext}>
        Infodoxx
      </div>
      <div className='flex1'>
        <NavBarMenu />
      </div>
      <ul className={styles.right}>
        <li>
          <Select
            triggerElement={triggerElement}
            options={ArcoLocaleOptions}
            value={lang}
            triggerProps={{
              autoAlignPopupWidth: false,
              autoAlignPopupMinWidth: true,
              position: 'br',
            }}
            trigger="click"
            onChange={(value) => {
              setLang(value);
              const nextLang = defaultLocale[value];
              Message.info(`${nextLang['message.lang.tips']}${value}`);
            }}
          />
        </li>
        <li>
          <Tooltip
            content={
              theme === 'light'
                ? t['settings.navbar.theme.toDark']
                : t['settings.navbar.theme.toLight']
            }
          >
            <IconButton
              icon={theme !== 'dark' ? <IconMoonFill /> : <IconSunFill />}
              onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
            />
          </Tooltip>
        </li>
        <li>
          <Dropdown droplist={droplist} position="br">
            <Avatar size={32} style={{ cursor: 'pointer' }}>
              {userInfo?.icon ? (<img alt="avatar" src={userInfo?.icon} />) : (<AllIcon name='IconUser' />)}
            </Avatar>
          </Dropdown>
        </li>
      </ul>
    </div >
  );
}

export default Navbar;
